<template>
  <div class="top">
    <div class="header">
      <div class="top">
        <div class="left">
          <van-search
            shape="round"
            background="red"
            placeholder="请输入搜索关键词"
          />
        </div>
        <div class="right">
          <van-icon name="qr" />
        </div>
      </div>
      <div class="bottom">
        <ul>
          <li @click="returns" style="color: red">{{ name }}</li>
          <li>价格</li>
          <li>销量</li>
          <li>新品</li>
        </ul>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      name: "",
    };
  },
  methods: {
    returns() {
      // 点击返回上一页
      history.go(-1);
    },
    tabName() {
      this.name = this.$route.query.title;
    },
  },
  created() {
    this.tabName();
  },
};
</script>
<style lang="less" scoped>
* {
  margin: 0;
  //   padding: 0;
  box-sizing: border-box;
}
.header {
  width: 100%;
  position: fixed;
  top: 0;
  .top {
    width: 100%;
    display: flex;
    background: red;
    .left {
      flex: 1;
    }
    .right {
      height: 100%;
      background: red;
      text-align: center;
      .van-icon {
        background: red;
        font-size: 32px;
        margin-top: 35%;
        color: white;
      }
    }
  }
  .bottom {
    width: 100%;
    height: 40px;
    line-height: 40px;
    background: white;
    ul {
      display: flex;
      height: 100%;
      justify-content: space-evenly;
      li {
        list-style: none;
        text-align: center;
      }
    }
  }
}
</style>